<!-- 独立图片放大 -->
<template>
  <div
    class="alone-img-zoom"
    @click="clickSight(imgZoomData)">

    <span class="alone-img-tag" v-if="aloneTag !== ''">{{aloneTag}}</span>

    <div class="alone-cont" :style="{height: aloneHeight + 'px', width: aloneWidth + 'px'}">
      <span class="alone-span">{{imgZoomData.title}}</span>
      <div class="alone-all">
        <img class="alone-img" v-lazy="imgZoomData.imgZoomItem" alt="">
      </div>
    </div>
    <slot name="content"></slot>
  </div>
</template>

<script>

export default {
  props: {
    imgZoomData: {
      type: Object,
      default: () => {}
    },
    aloneHeight: {
      type: Number,
      default: 400
    },
    aloneWidth: {
      type: Number,
      default: 400
    },
    aloneTag: {
      type: String,
      default: ''
    }
  },
  data () {
    return {}
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    clickSight (item) {
      this.$emit('clickSight', item)
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.alone-img-zoom {
  position relative
  display inline-block
  margin 5px
  overflow hidden
  .alone-img-tag {
    position absolute
    top 10px
    left 10px
    z-index 100
    color #fff
    font-size 14px
  }
  .alone-cont {
    position relative
    &:hover {
      .alone-span {
        height 100%
      }
      .alone-img  {
        transform scale(1.2)
      }
    }
  }
  .alone-span {
    position absolute
    bottom 0px
    left 0px
    color #fff
    background rgba(0,0,0,0.4)
    width 100%
    height 40px
    z-index 1
    display flex
    align-items center
    justify-content center
    transition height 0.7s
  }
  .alone-all {
    width 100%
    height 100%
    overflow hidden
    // position absolute
    // top 0
    // left 0
    .alone-img {
      transition transform 1s
      width 100%
      height 100%
    }
  }
}
</style>
